<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>增删设备</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>

    <style>
        .layui-form-select dl {
            max-height: 224px;
        }
    </style>
</head>

<body class="layui-anim layui-anim-scale flag" style="display: none"><br/>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a>首页</a>
                <a>设备管理</a>
                <a>增删设备</a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card" style="border-radius: 20px;">
                <div class="layui-card-body" style="background-image: linear-gradient(#8dd6d1,#ffffff,#ffffff, #8dd6d1);border-radius: 20px;margin-bottom: 20px">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                        <legend class="layui-icon">删除设备 &#xe616;&#xe616;&#xe616;</legend>
                    </fieldset>
                    <div id="deleteDevice" style="margin-bottom: 20px">
                        {foreach $data as $value}
                        <button type="button" class=" layui-btn layui-btn-lg layui-btn-radius"
                                style="margin-left: 0;margin-bottom: 7px">
                            <i class="layui-icon">{$value.icon}</i>
                            <i id="chinese">{$value.chinese}</i>
                            <b style="display: none">{$value.function}</b>
                            <i class="layui-icon layui-icon-delete" style="margin-left: 10px"></i>
                        </button>
                        {/foreach}
                    </div>
                </div>
            </div>
            <div class="layui-card" style="border-radius: 20px;">
                <div class="layui-card-body" style="background-image: linear-gradient(#ffeae4,#ffffff, #ffeae4);border-radius: 20px;">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                        <legend class="layui-icon">添加设备 &#xe61f;&#xe61f;&#xe61f;</legend>
                    </fieldset>
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">设备名</label>
                            <div class="layui-input-block">
                                <input type="text" name="devname" lay-verify="required" lay-reqtext="设备名为必填项，岂能为空？"
                                       placeholder="注意名称不能与现有设备相同"
                                       title="注意名称不能与现有设备相同"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">设备标识名</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" lay-verify="devicefun" autocomplete="off"
                                       placeholder="例如：traffic_light &nbsp/&nbsp temperature_sensor &nbsp/&nbsp infrared_sensor"
                                       title="例如：traffic_light &nbsp/&nbsp temperature_sensor &nbsp/&nbsp infrared_sensor"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">数据单位</label>
                            <div class="layui-input-block">
                                <input type="text" name="unit" lay-verify="" autocomplete="off"
                                       placeholder="请输入该设备所产生的的数据的单位，可以为空，一旦录入不可更改。"
                                       title="请输入该设备所产生的的数据的单位，可以为空，一旦录入不可更改。"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">选择图标</label>
                            <a class="layui-btn" onclick="xadmin.open('图标预览','/index/Tools/icon')">图标预览</a>

                            <div class="layui-input-inline">
                                <select name="iconpick" lay-verify="required" lay-reqtext="挑一个您喜欢的图标" lay-search>
                                    <option value="">直接选择或搜索选择</option>
                                    {foreach $icons as $icon}
                                    <option value={$icon.icon_sym}>{$icon.icon_name}</option>
                                    {/foreach}

                                </select>
                            </div>

                        </div>


                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit="" lay-filter="add">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['form', 'element', 'jquery'], function () {
        var form = layui.form
            , layer = layui.layer
            , element = layui.element
            , $ = layui.jquery;

        //动态显示
        parent.layui.notice.remove();
        parent.layui.notice.info('增删设备界面', '已进入', parent.noticeOpt1);
        // setTimeout(function () {
        //     $('.flag').show();
        // }, 30);
        $('.flag').show();
        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 1) {
                    return '您还未填写设备标识名';
                }
            },
            devicefun: function (value) {
                // console.log(/^\d+$/.test(value));
                var regString = /[a-zA-Z]+/; //验证大小写26个字母任意字母最少出现1次。
                if (!(regString.test(value)) || value.length < 1){
                    parent.layui.notice.remove();
                    parent.layui.notice.error('您输入的设备标识名格式错误，请重新输入！', '操作异常', parent.noticeOpt5);
                    return '您输入的设备标识名格式错误，请重新输入！';
                }

            }
        });

        //删除设备事件绑定
        $('#deleteDevice').on('click', 'button', function () {
            // layer.alert('你点击了'+$(this).innerText);
            var deviceName = $(this).find("#chinese").text();
            var deviceFun = $(this).children("b").text();
            parent.layui.notice.remove();
            parent.layui.notice.warning('正在删除总设备：' + deviceName, '操作提示：', parent.noticeOpt3);
            layer.confirm('真的要删除 ' + deviceName + ' 吗？', {
                    shade: [0.6, '#dc7069'],
                    btn: ['我确定', '再想想'],
                    icon: 0,
                    closeBtn: 0,
                    title: '请谨慎执行此操作'
                }, function () {
                    // obj.del();
                    layer.confirm('请再次确认是否要删除 ' + deviceName, {
                            shade: [0.7, '#8c261f'],
                            anim: 6,
                            btn: ['心意已决', '还是算了吧'],
                            icon: 3,
                            title: '此操作不可逆转'
                        },
                        function (index) {
                            var load = layer.load();
                            $.ajax({
                                type: "POST",
                                url: "/index/Tools/device_delete",
                                data: {
                                    function: deviceFun,
                                    deviceName: deviceName
                                },
                                success: function (msg) {
                                    layer.close(load);
                                    parent.layui.notice.remove();
                                    if (msg === 'ok') {
                                        parent.layui.notice.success('总设备'+deviceName+'删除成功', '操作完成', parent.noticeOpt4);
                                        layer.msg('总设备'+deviceName+'删除成功', {time: 1500, icon: 1});
                                        setTimeout(function () {
                                            parent.location.reload();
                                        }, 1600);

                                    } else {
                                        parent.layui.notice.error(msg, '操作异常', parent.noticeOpt5);
                                        layer.msg(msg, {time: 1000});
                                    }

                                },
                                error: function () {
                                    layer.close(load);
                                    parent.layui.notice.remove();
                                    parent.layui.notice.error('数据传输失败，请联系后台管理员', '操作异常', parent.noticeOpt5);
                                    layer.alert('数据传输失败，请联系后台管理员！', {icon: 2})
                                }
                            });
                            layer.close(index);
                        },
                        function () {
                            layer.msg('您取消了操作', {time: 600});
                            // location.reload();
                        }
                    );


                },
                function () {
                    layer.msg('您取消了操作', {time: 600});
                    // location.reload();
                }
            );


        });

        //监听提交
        form.on('submit(add)', function (data) {
            // console.log(data.field.devname);
            // console.log(data.field.title);
            //使用ajax传递数据
            // layer.msg('添加中……',{time:600});
            var load = layer.load();
            $.ajax({
                type: "POST",
                url: "/index/Tools/device_insert",
                data: {
                    chinese: data.field.devname,
                    function: data.field.title,
                    icon: data.field.iconpick,
                    unit: data.field.unit,
                },
                success: function (msg) {
                    //发异步，把数据提交给php
                    // console.log(msg);
                    layer.close(load);
                    parent.layui.notice.remove();
                    if (msg === 'ok') {
                        // parent.location.reload();
                        // 获得frame索引
                        // var index = parent.layer.getFrameIndex(window.name);
                        parent.layui.notice.success(data.field.devname+'设备新增成功！', '操作完成', parent.noticeOpt4);
                        parent.layer.msg(data.field.devname+'设备新增成功！', {
                            icon: 6,
                            time: 1600
                        });
                        setTimeout(function () {
                            parent.location.reload();
                        }, 1700);
                        //关闭并刷新页面
                        // setTimeout(function () {
                        //     parent.layer.close(index);
                        // }, 1000);
                        // parent.location.reload();

                    } else {
                        parent.layui.notice.error(msg, '操作异常', parent.noticeOpt5);
                        layer.alert(msg, {icon: 7});
                    }
                },
                error: function () {
                    layer.close(load);
                    parent.layui.notice.remove();
                    parent.layui.notice.error('数据提交失败，请联系后台管理员', '操作异常', parent.noticeOpt5);
                    layer.alert('数据提交失败，请联系后台管理员！', {icon: 2})
                }
            });
            return false;
        });


    });
</script>
</body>
</html>